<template>
    <view class="">
        <view class="item flex top-15" @click="toEvalDetail">
            <view class="imageBox">
                <image class="image" :src="item.image[0].url" mode="aspectFill" />
            </view>
            <view class="titles flex">
                <view class="font16 fontBold">
                    <text v-if="item.build_size_range">{{item.build_size_range}}m²{{item.sell_type_display?'（'+item.sell_type_display+'）':''}}</text>
                    <text class="left-3">{{item.house_type}}</text>
                </view>
                <view class="top-10" v-if="item.amount_range.length > 0">
                    约<text class="col-theme">{{amountToBit(item.amount_range)}}</text>万
                </view>
                <view class="col-grey top-10" v-if="item.size">户内预估：{{item.size}}m²</view>
                <block v-if="item.vr">
                    <view class="vrBtn bg-theme text-center col-fff fontBold font16 top-10" @click.stop="toVR(item)">VR</view>
                </block>
                <!-- <view class="flex col-theme top-10" v-if="item.bird" @click.stop="toAerialView">
                    <text class="right-5">户型分布鸟瞰图</text>
                    <u-icon name="arrow-right" color="#007235" size="14"></u-icon>
                </view> -->
            </view>
        </view>
        <slot></slot>
    </view>
</template>
<script>
    import { mapState } from 'pinia';
    import { useConfigStore } from '@/store/index';
    import { getBit } from '@/common/common';
	export default {
		data() {
			return {
            }
		},
        props:{
            item: {
                value: Object,
                default: {}
            },
            kaiId: {
                value: String,
                default: ''
            }
        },
        computed:{
            ...mapState(useConfigStore, ['puid'])
        },
       
        methods: {
            //vr
            toVR(info){
                let url = encodeURIComponent(info.vr_url);
                let image = encodeURIComponent(info.image[0].url);
                uni.navigateTo({
                	url: `/pages/product/article/detail/index?url=${url}&productId=${info.product}&puid=${this.puid}&title=${info.product_title}(VR)&image=${image}`
                })
            },
            
            //鸟瞰图
            // toAerialView() {
            //     uni.navigateTo({
            //     	url: `/pages/house/airview/pages?productId=${this.item.product}&kaiId=${this.kaiId}&puid=${this.puid}&title=${this.item.product_title}&prepage=楼盘户型分布图-${this.item.product}-${this.item.product_title}`
            //     })
            // },
            
            //评测详情
            toEvalDetail() {
                uni.navigateTo({
                	url: `/pages/product/house-type/detail/page?productId=${this.item.product}&sizeId=${this.item.id}&kaiId=${this.kaiId}&puid=${this.puid}&title=${this.item.product_title}&prepage=楼盘户型分布图-${this.item.product}-${this.item.product_title}`
                })
            },
            amountToBit(val){
                return getBit(val);
            }
		}
	}
</script>

<style lang="scss" scoped>
    .item{
        padding-bottom: 30rpx;
        justify-content: space-between;
        border-bottom: 2rpx solid rgba(0,0,0,.05);
        .imageBox{
            width: 300rpx;
            height: 300rpx;
            .image{
                width: 100%;
                height: 100%;
            }
        }
        .titles{
            flex-direction: column;
            align-items: flex-start;
            width: calc(100% - 320rpx);
            .vrBtn{
                width: 120rpx;
                height: 56rpx;
                line-height: 56rpx;
                border-radius: 20rpx;
                box-shadow: 0rpx 0rpx 8rpx $theme-color;
            }
        }
    }
</style>
